<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="div1" id="id1">
            <div class="div3">
               <div class="div5"></div>
               <p>jquery选择器</p>
            </div>
            <div class="div4"></div>
       </div>
       <span class="blue">span标签</span>
       <div class="div2" id="id2"></div>
       <div class="div6"></div>
    </div>
    <hr>
    <div class="form"> <form action="提交地址" method="post">
        <label for="text">文本输入：</label>
        <input type="text" id="text" name="text"><br><br>

        <label for="password">密码输入：</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="email">邮箱输入：</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="number">数字输入：</label>
        <input type="number" id="number" name="number"><br><br>

        <label for="date">日期输入：</label>
        <input type="date" id="date" name="date"><br><br>

        <label for="checkbox">复选框：</label>
        <input type="checkbox" id="checkbox1" name="checkbox1">
        <label for="checkbox1">选项1</label>
        <input type="checkbox" id="checkbox2" name="checkbox2">
        <label for="checkbox2">选项2</label><br><br>

        <label for="radio">单选按钮：</label>
        <input type="radio" id="radio1" name="radio" value="option1">
        <label for="radio1">选项1</label>
        <input type="radio" id="radio2" name="radio" value="option2">
        <label for="radio2">选项2</label><br><br>

        <label for="select">下拉选择：</label>
        <select id="select" name="select">
            <option value="option1">选项1</option>
            <option value="option2">选项2</option>
            <option value="option3">选项3</option>
        </select><br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form></div>
    
  
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var div1 = $(".div1") //class选择器
        var div2 = $("#id1")//id选择器
        var all =$('*')//页面中的全部信息
        var bq=$('span')//标签选择器
        var gp=$(".div1,#id1,.blue")//组合选择器
        var hd =$(".div1 div,p" )//后代选择器
        var zd =$('.div1>div')//子代选择器，不包括或孙子节点
        var xl =$('.div1+div,p')//相邻选择器,必须上下挨着，隔着标签不行
        var tb =$('.div1~div')//同辈选择器
        // console.log(tb)
    </script>

    <script>
        var inputs=$(":input")//表单选择器，提交按钮也在其中
        var input2 = $('input')
        console.log(inputs)
    </script>
</body>
</html>